<template>
  <j-modal
    :title="'选择属性'"
    :width="'900px'"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="8" :lg="7" :md="8" :sm="24">
              <a-form-item label="属性编码">
                <j-input placeholder="请输入属性编号" v-model="queryParam.propNo"></j-input>
              </a-form-item>
            </a-col>
            <a-col :xl="8" :lg="7" :md="8" :sm="24">
              <a-form-item label="属性名称">
                <j-input placeholder="请输入属性名称" v-model="queryParam.propName"></j-input>
              </a-form-item>
            </a-col>
            <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="类型">
                <j-dict-select-tag placeholder="请选择类型" v-model="queryParam.propType" dictCode="prop_type" />
              </a-form-item>
            </a-col> -->
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 查询区域-END -->
      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{ x: true }"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
          :rowSelection="{ selectedRowKeys, onChange: onSelectChange, type: selectType }"
          @change="handleTableChange"
        >
        </a-table>
      </div>
    </a-card>
  </j-modal>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'

export default {
  name: 'DataPropertyList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  props: {
      //选择类型 radio、checkbox
      selectType: {
        type: String,
        default: "radio",
        required: false
      }
    },
  data() {
    return {
      /* 排序参数 */
      isorter: {
        column: 'id',
        order: 'desc',
      },
      description: '数据属性管理页面',
      // 表头
      columns: [
        // {
        //   title: '#',
        //   dataIndex: '',
        //   key: 'rowIndex',
        //   width: 60,
        //   align: 'center',
        //   customRender: function (t, r, index) {
        //     return parseInt(index) + 1
        //   },
        // },
        // {
        //   title: '属性id',
        //   align: 'center',
        //   dataIndex: 'id',
        // },
        {
          title: '属性编号',
          align: 'center',
          dataIndex: 'propNo',
        },
        {
          title: '属性名称',
          align: 'center',
          dataIndex: 'propName',
        }, 
        {
          title: '类型',
          align: 'center',
          dataIndex: 'propType_dictText',
        },
      ],
      url: {
        list: '/dataProperty/dataProperty/list',
        delete: '/dataProperty/dataProperty/delete',
        deleteBatch: '/dataProperty/dataProperty/deleteBatch',
        exportXlsUrl: '/dataProperty/dataProperty/exportXls',
        importExcelUrl: 'dataProperty/dataProperty/importExcel',
      },
      dictOptions: {},
      superFieldList: [],
      visible: false,
      queryParam: { propType: '' ,status : 1},
      propType: '',
      // 分页参数
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30','50','100'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
    }
  },
  created() {},
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    initDictConfig() {},
    show(propType) {
      this.queryParam = {propNo :'',propName :'' ,propType : propType,status : 1 }
      this.propType = propType
      this.selectionRows = []
      this.selectedRowKeys = []
      this.loadData(1)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择属性！')
        return
      }
      this.$emit('ok', this.selectType=='radio'?this.selectionRows[0]:this.selectionRows)
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    searchReset() {
      if (this.propType) {
        this.queryParam.propType = this.propType
      }
      this.queryParam.propNo = ''
      this.queryParam.propName = ''
      this.queryParam.status = 1
      this.loadData(1)
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>